<template>
  <div class="echart">
    <!-- <svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <line
        class="line"
        x1="10"
        x2="600"
        y1="110"
        y2="110"
        stroke="orange"
        fill="transparent"
        stroke-width="8"
      />
    </svg>-->
    <!-- <svg >
      <line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke-dasharray="300,320" stroke-dashoffset='300'/>
    </svg>-->
    <!-- <svg width="180" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        id="pathSecond"
        fill="none"
        stroke="rgba(0,0,0,0.8)"
        stroke-width="2px"
        d="M73.73,24.5c0,0,2.78-21.26-23.75-16.46
              c0,0-11.12-12.63-25.01-5.81c0,0-11.12,4.8-8.84,16.67
 c0,0-13.81-2.27-16.13,13.39c0,0-3.07,10.67,10.32,16.71h180.02"
      />
    </svg> -->
    <svg width="180" height="90" version="1.1" xmlns="./云.svg">
      <path
          id="pathSecond"
          fill="none"
          stroke="rgba(0,0,0,0.8)"
          stroke-width="2px"
          d="M25,75.6666668 C11.6666666,75.6666668 1,65 1,51.6666667 C1,41 7.93333338,31.9333334 17,28.7333334 C19.1333334,13.2666667 32.4666666,1 49,1 C62.8666666,1 75.1333334,10.0666666 79.4,22.3333334 C92.2,23.9333334 102.333333,35.1333334 102.333333,49 C102.333333,62.8666666 91.6666668,74.0666666 78.3333334,75.6666668 L25,75.6666668 Z"
      />
    </svg>
  </div>
</template>



<script>
/* */
</script>



<style lang="less" scoped>
.echart {
  width: 100%;
  height: 100%;
  background:#fff;
  text-align: center;
  padding: 80px 50px;
}
// .line {
//   // animation: move 3s linear forwards;
//   stroke-dasharray: 20px, 10px;
//   stroke-dashoffset: 0;
// }
// @keyframes move {
//   0% {
//     stroke-dasharray: 0, 800px;
//   }
//   100% {
//     stroke-dasharray: 800px, 0;
//   }
// }
// svg:hover #line {
//   stroke-dashoffset: 0;
// }
// #line {
//   transition: all 1s;
// }
#pathSecond {
  stroke-dashoffset: 0;
  animation: move 3s infinite linear;
}
@keyframes move {
  0% {
    stroke-dasharray: 0, 600px;
    opacity: 1;
    stroke-width: 3px;
  }
  100% {
    stroke-dasharray: 600px, 0px;
    opacity: 0;
  }
}
</style>
